import React, { Component } from 'react'
import axios from 'axios';
import "./Proxy.css"

export default class Proxy extends Component {
    state = {
        cailikey: []
    }
    render() {
        return (
            <div>
                <button onClick={this.getmovies}>获取美团数据</button>
                <div className="cai">
                    <h2>猜我喜欢</h2><hr />
                    {
                        this.state.cailikey.map(item => {
                            return <div className="card-container" key={item.itemId}>
                                <div className="recommend-card-wrapper">
                                    <div className="img-box">
                                        <img src="https://p1.meituan.net/dpmerchantpic/01330588a468d401580ba4b163c82448454839.jpg@267w_150h_1e_1c"
                                            className="image" />
                                    </div>
                                    <div className="info-box">
                                        <div className="title aligned" title={item.title}>{item.title}</div>
                                        <div className="score-line aligned">
                                            <div className="comment-number">{item.commentNum}</div>
                                        </div>
                                        <div className="desc-line aligned">
                                            <div className="desc">{item.areaName}</div>
                                        </div>
                                        <div className="bottom-line aligned">
                                            <div className="price-box">
                                                <span>
                                                    <span className="yuan">￥</span>
                                                    <span className="price-number numfont">{item.lowPrice}</span>
                                                    <span className="price-desc">起</span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        })

                    }
                </div>
            </div>
        )
    }

    getmovies = async () => {
        //发送 AJAX 请求
        let result = await axios.get('/meituan');
        console.log(result.data);
        this.setState({
            cailikey: result.data
        })
    }
}
